import { defineComponent, ref, computed } from "vue";
import { Input, Button, message } from "ant-design-vue";
import { useRouter } from "vue-router";
import { useUserStore, useSystemStore } from "@/stores";
import { login, user } from "@/api";
import { setToken } from "@/utils";
import NoFooter from "@/components/WithoutHeaderWithFooter";
import styles from "./login/index.module.scss";
import banner from "@/assets/images/login/banner.png";

export default defineComponent({
  name: "LoginPage",
  setup() {
    const router = useRouter();
    const userStore = useUserStore();
    const systemStore = useSystemStore();

    const loading = ref(false);
    const email = ref("");
    const password = ref("");

    const systemConfig = computed(() => systemStore);

    const loginSubmit = () => {
      if (!email.value) {
        message.error("请输入邮箱或UID");
        return;
      }
      if (!password.value) {
        message.error("请输入密码");
        return;
      }
      if (loading.value) {
        return;
      }
      handleSubmit();
    };

    const keyUp = (e: KeyboardEvent) => {
      if (e.keyCode === 13) {
        loginSubmit();
      }
    };

    const handleSubmit = () => {
      if (loading.value) {
        return;
      }
      loading.value = true;
      if (systemConfig.value["ldap-enabled"] === "1") {
        login
          .loginLdap(email.value, password.value)
          .then((res: any) => {
            const token = res.data.token;
            setToken(token);
            getUser();
          })
          .catch(() => {
            loading.value = false;
          });
      } else {
        login
          .login(email.value, password.value)
          .then((res: any) => {
            const token = res.data.token;
            setToken(token);
            getUser();
          })
          .catch(() => {
            loading.value = false;
          });
      }
    };

    const getUser = () => {
      user.detail().then((res: any) => {
        const data = res.data;
        userStore.loginAction(data);
        loading.value = false;
        router.replace("/");
      });
    };

    return () => (
      <div class={styles["login-content"]}>
        <div class={styles["top-content"]}>
          <div class={styles["logo-section"]}>
            <div class={styles["logo"]}>
              <div class={styles["logo-icon"]}>P</div>
              <div class={styles["logo-text"]}>PLAYEDU</div>
            </div>
          </div>
          <div class={styles["title"]}>学员登录</div>
          <div class={styles["login-box"]}>
            <div class={styles["left-box"]}>
              <img class={styles["icon"]} src={banner} alt="" />
            </div>
            <div class={styles["right-box"]}>
              <div class="login-box d-flex">
                <Input
                  data-name="nameInput"
                  value={email.value || ""}
                  onChange={(e) => {
                    email.value = (e.target as HTMLInputElement).value;
                  }}
                  style={{ width: 400, height: 54 }}
                  placeholder="请输入邮箱或UID"
                  onKeyup={keyUp}
                />
              </div>
              <div class="login-box d-flex mt-50">
                <Input.Password
                  data-name="passwordInput"
                  value={password.value || ""}
                  onChange={(e) => {
                    password.value = (e.target as HTMLInputElement).value;
                  }}
                  style={{ width: 400, height: 54, padding: " 12px 16px" }}
                  placeholder="请输入密码"
                  onKeyup={keyUp}
                />
              </div>
              <div class="login-box d-flex mt-50">
                <Button data-name="loginButton" style={{ width: 400, height: 54, backgroundColor: "#ff4d4f", borderColor: "#ff4d4f" }} type="primary" onClick={loginSubmit} loading={loading.value}>
                  立即登录
                </Button>
              </div>
            </div>
          </div>
        </div>
        <div class={styles["footer"]}>
          <NoFooter />
        </div>
      </div>
    );
  },
});
